<template>
  <el-card class="home__card-item home__waiting-collection">
    <div slot="header" class="home__card-title clearfix">
      <h3>应收余额（销售）</h3>
      <div>截至: {{ currentDate }}</div>
    </div>

    <div class="home__card-content">
      <!-- 汇总 -->
      <div class="home__card-content-sum">
        <div class="home__card-content-sum__item">
          <label>{{ this.summary.totalAmountText }}</label>
          <span>{{ this.summary.totalAmount }}</span>
        </div>
      </div>

      <!-- 详情 -->
      <div class="home__card-content-wrap">
        <tabs v-model="currentTab" :tabs="tabs" />
        <!-- 按开票时间 -->
        <template v-if="currentTab === 'invoice'">
          <div class="home__waiting-collection__content">
            <el-table
              :data="tableDataInvoice"
              border
              size="mini"
              height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="index"
                label="排行" />
              <el-table-column
                show-overflow-tooltip
                prop="invoiceId"
                label="开票编号" />
              <el-table-column
                show-overflow-tooltip
                prop="customerName"
                label="客户名称" />
              <el-table-column
                show-overflow-tooltip
                prop="amount"
                label="待核销金额" />
              <el-table-column
                show-overflow-tooltip
                prop="saleTeamName"
                label="团队" />
              <el-table-column
                show-overflow-tooltip
                prop="saleUserName"
                label="销售" />
              <el-table-column
                show-overflow-tooltip
                prop="invoiceTime"
                label="开票时间">
                <template v-slot="scope">
                  <span>{{ parseTime(scope.row.invoiceTime) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
           <!-- 分页组件 -->
        <pagination v-show="tableDataInvoiceTotal>0" :total="tableDataInvoiceTotal" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="waitingCollectionReport"/>
        </template>
        <!-- 客户 -->
        <template v-if="currentTab === 'customer'">
          <div class="home__waiting-collection__content">
            <el-table
              :data="tableDataCustomer"
              border
              size="mini"
              height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="index"
                label="排行" />
              <el-table-column
                show-overflow-tooltip
                prop="customerName"
                label="客户名称" />
              <el-table-column
                show-overflow-tooltip
                prop="amount"
                label="应收余额" />
              <el-table-column
                show-overflow-tooltip
                prop="saleTeamName"
                label="团队" />
              <el-table-column
                show-overflow-tooltip
                prop="saleUserName"
                label="销售" />
            </el-table>
          </div>
              <!-- 分页组件 -->
        <pagination v-show="tableDataCustomerTotal>0" :total="tableDataCustomerTotal" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="waitingCollectionReport"/>
        </template>
        <!-- 销售 -->
        <template v-if="currentTab === 'sale'">
          <div class="home__waiting-collection__content">
            <el-table :data="tableDataSale" border size="mini" height="350px">
              <el-table-column
                show-overflow-tooltip
                prop="index"
                label="排行" />
              <el-table-column
                show-overflow-tooltip
                prop="saleUserName"
                label="销售" />
              <el-table-column
                show-overflow-tooltip
                prop="saleTeamName"
                label="团队" />
              <el-table-column
                show-overflow-tooltip
                prop="customerCount"
                label="客户数" />
              <el-table-column
                show-overflow-tooltip
                prop="amount"
                label="应收余额" />
            </el-table>
          </div>
                   <!-- 分页组件 -->
        <pagination v-show="tableDataSaleTotal>0" :total="tableDataSaleTotal" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="waitingCollectionReport"/>
        </template>
      </div>
    </div>
  </el-card>
</template>

<script>
import Tabs from './tabs.vue'
import moment from 'moment'
import { waitingCollectionReport } from '@/api/report/report'
export default {
  components: {
    Tabs
  },

  data() {
    return {
      summary: {},
      currentDate: moment().format('YYYY-MM-DD'),
      currentTab: 'invoice',
      tabs: [
        { name: '按开票时间', value: 'invoice' },
        { name: '按客户', value: 'customer' },
        { name: '按销售', value: 'sale' }
      ],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      total: 1000,
      tableDataInvoiceTotal: 1000,
      tableDataInvoice: [],
      tableDataCustomerTotal: 1000,
      tableDataCustomer: [],
      tableDataSaleTotal: 1000,
      tableDataSale: [],
      instances: {}
    }
  },

  watch: {
    currentTab() {
      this.waitingCollectionReport()
    }
  },

  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleResize)
    })
  },
  created() {
    this.waitingCollectionReport()
  },
  methods: {
    waitingCollectionReport() {
      this.queryParams.createTime=[]
      waitingCollectionReport(this.currentTab, this.queryParams).then((response) => {
        this.summary = response.data.summary
        if (this.currentTab === 'invoice') {
          this.tableDataInvoice = response.data.tableDataInvoice.list
          this.tableDataInvoiceTotal = response.data.tableDataInvoice.total
        }
        if (this.currentTab === 'customer') {
          this.tableDataCustomer = response.data.tableDataCustomer.list
          this.tableDataCustomerTotal = response.data.tableDataCustomer.total
        }
        if (this.currentTab === 'sale') {
          this.tableDataSale = response.data.tableDataSale.list
          this.tableDataSaleTotal = response.data.tableDataSale.total
        }
      })
    },
    currentChange() {},
    getTableData() {},
    handleResize() {
      Object.keys(this.instances).forEach((key) => {
        this.instances[key]?.resize?.()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home__waiting-collection {
  .home__waiting-collection__content {
    margin: 20px 0;
    display: flex;
    .home__waiting-collection__echart {
      width: 100%;
      height: 250px;
    }
    ::v-deep .el-table:first-child {
      flex: 1;
      margin-right: 30px;
    }
    :v-deep .el-table {
      width: 100%;
    }
  }
}
</style>
